<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>速度中国工时系统</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/build/css/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/easyui.css">
    <link rel="stylesheet" type="text/css" href="/css/my-style.css">
    <link rel="stylesheet" type="text/css" href="/ztree/3.5/css/metro/zTreeStyle.css"/>
    <style type="text/css">
        body {
            padding: 10px 30px;
        }

        .hide {
            display: none
        }
        .layui-layer-setwin .layui-layer-max {
            display: none;
        }
    </style>
</head>

<body>
<div class="kit-doc">


    <div class="layui-card layui-card-body">
        <!-- 表格增删改查btn -->
        <div class="layui-btn-group layui-m-b-5">
            <button class="layui-btn layui-btn-sm" id="modal1"><i class="fa fa-plus">

            </i>&nbsp;增加
            </button>

        </div>
        <div class="layui-btn-group layui-m-b-5">
            <button class="layui-btn layui-btn-sm" id="all-up"><i class="fa fa-plus">

            </i>&nbsp;全部收起
            </button>

        </div>
        <div class="layui-btn-group layui-m-b-5">
            <button class="layui-btn layui-btn-sm" id="all-down"><i class="fa fa-plus">

            </i>&nbsp;全部打开
            </button>
        </div>

        <div class="test-tree-table" lay-filter="test1"></div>

    </div>

</div>
<!-- 弹框content -->
<div id="modal-content1" style="display: none; padding:20px;">
    <form class="layui-form" action="/system/resource/addResource">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单类型</label>
            <div class="layui-input-block">
                <select name="resourceType" lay-verify="required" id="resourceType">
                    <option value="M">菜单目录</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" name="resourceName">菜单名称</label>
            <div class="layui-input-block">
                <input type="text" name="resourceName" required lay-verify="required"
                       placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">url</label>
            <div class="layui-input-inline">
                <input type="text" name="url" required lay-verify="required"
                       placeholder="请输入url路径" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" name="resourceName">排序</label>
            <div class="layui-input-block">
                <input type="text" name="orderNum" required lay-verify="required"
                       placeholder="请输入排序数字" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" name="resourceName">标记</label>
            <div class="layui-input-block">
                <input type="text" name="remark" required lay-verify="required"
                       placeholder="请输入标识remark" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script src="../../static/plugins/layui/layui.js" th:src="@{/plugins/layui/layui.js}"></script>
<script type="text/javascript" src="../../static/js/jquery.min.js"
        th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" src="../../static/js/jquery.easyui.min.js"
        th:src="@{/js/jquery.easyui.min.js}"></script>
<script src="/ztree/3.5/js/jquery.ztree.all-3.5.js"></script>
<script src="/js/ry-ui.js"></script>
<!--展示树形菜单表-->
<script type="text/javascript">
    layui.config({
        base: '/js/',
    })
    var data;
    layui.use(['treetable', 'table', 'form'], function () {
        var table = layui.table;
        var $ = layui.$, treetable = layui.treetable;

        $.ajax({
            type: "GET",//请求方式
            async: false,
            url: "/system/resource/getAll",//地址，就是json文件的请求路径
            dataType: "json",//数据类型可以为 text xml json  script  jsonp
            success: function (result) {//返回的参数就是 action里面所有的有get和set方法的参数
                data = result;
            }

        });
        treetable.render({
            elem: '.test-tree-table',
            data: data,
            field: 'resourceName',
            cols: [

                {
                    field: 'resourceName',
                    title: '菜单名称',
                    width: '20%'
                },
                {
                    field: 'resourceType',
                    title: '菜单类型',
                    width: '10%',
                    templet: '#resourceTypeTpl'
                },
                {
                    field: 'url',
                    title: 'url',
                    width: '10%'
                },
                {
                    field:'perms',
                    title: "权限表达式",
                    width:'10%'
                },
                {
                    field: 'createBy',
                    title: '创建者',
                    width: '10%'
                },
                {
                    field: 'remark',
                    title: '备注',
                    width: '10%'
                },
                {
                    field: 'actions',
                    title: '操作',
                    width: '30%',
                    data: [
                        '<a href="#"  onclick="addResource(this)">新增&nbsp;&nbsp;&nbsp;</a><a href="#" onclick="editResource(this)">编辑&nbsp;&nbsp;&nbsp;</a><a href="#" onclick="deleteResource(this)">删除</a>',
                    ]
                }
            ]
        });

        $('#all-up').click(function () {
            treetable.all('up');
        })

        $('#all-down').click(function () {
            treetable.all('down');
        })

        for (var i = 0; i < data.length; i++) {
            var typeDiv = $("tr[data-tb-id=" + data[i].id + "] td:eq(1) div");
            var typeDiv2 = $("tr[data-tb-id=" + data[i].id + "] td:eq(5) div");
            if (data[i].resourceType == 'C') {
                typeDiv.text("菜单");
            } else if (data[i].resourceType == 'F') {
                typeDiv.text("按钮");
                $(typeDiv2.children("a")[0])[0].hidden="true";
            } else {
                typeDiv.text("目录");
            }

        }
    });


</script>

<!-- 表单 -->
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

    });
</script>
<!--弹框-->
<script>

    var $ = layui.jquery,
        layer = layui.layer;

    $('#modal1').on('click', function () {
        layer.open({
            title: "内容添加",
            type: 1,
            content: $("#modal-content1"),
            area: ['40%', '60%'],
            shadeClose: true,
            end: function () {
                //关闭窗口时清空表单内容
                $("#modal-content1").find('input[type=text],select,textarea,input[type=hidden]').each(function () {
                    $(this).val('');
                });

            }
        });
    });

</script>


<!--点击按钮事件-->
<script>
    //请求父菜单
    $(function () {
        $.ajax({
            type: "GET",//请求方式
            url: "/system/resource/getParentResource",
            dataType: "json",
            success: function (result) {
                for (var i = 0; i < result.length; i++) {
                    $("#parentName").append("<option value='" + result[i]['resourceName'] + "'>" + result[i]['resourceName'] + "</option>");
                }
            }
        });
    });
</script>

<script>
    /**
     * 编辑菜单
     * @param btn
     */
    function editResource(btn) {
        // 当前行的id
        var id = $(btn).parent().parent().parent().attr("data-tb-id");
        /**
         * 向后台请求更新
         */
        $.modal.open("内容修改", "/system/resource/update/" + id);

    }

    /**
     * 删除
     */
    function deleteResource(btn) {

        // 当前行的id
        var id = $(btn).parent().parent().parent().attr("data-tb-id");
        /**
         * 向后台请求更删除
         */
        layer.confirm('确定删除当前行？', function (index) {
            // console.log("当前行的数据为：" + id);
            //obj.del(); //删除对应行（tr）的DOM结构
            layer.close(index);
            //向服务端发送删除指令
            layui.$.ajax({
                type: 'DELETE',
                url: "/system/resource/del/" + id,
                success: function (res) {
                    // console.log(res);
                    layer.closeAll();
                    if (res.code == 0) {
                        layer.msg("删除成功");
                        window.location.reload();
                    } else {
                        layer.msg("修改失败");
                    }
                }
            });

        });
    }

    /**
     * 新增子菜单
     */
    function addResource(btn) {
        // 当前行的id
        var id = $(btn).parent().parent().parent().attr("data-tb-id");
        /**
         * 向后台请求新增
         */
        $.modal.open("新增资源", "/system/resource/add/" + id);

    }
</script>
</body>
</html>